<script setup>
import { ElMessage } from 'element-plus';
import { reactive, toRefs,ref, inject, onMounted } from 'vue';
import { useItem } from '../../../../store/index.js';
const useItemer = useItem()
const props = defineProps({
    volumeConfig: {
        type: Object,
        default: {}
    },
    method: {
        type: String,
        default: 'Create'
    }
})
onMounted(()=> {
    if(props.method != "Create") {
        data.newVolumeConfig = props.volumeConfig
    }
})
const data = reactive({
    newVolumeConfig: {
        name: '',
        nfs: {
          server: '',
          path: '',
          readonly: false
        }
    },
    rules: {
        name: [
            {required: true, message: '请输入Volume名称', trigger: 'blur'}
        ],
        'nfs.path': [
            {required: true, message: '请输入NFS路径', trigger: 'blur'},
            {pattern: '^(?=/)', message: 'Path必须以 / 开头', trigger: 'blur'}
        ],
        'nfs.server': [
            {required: true, message: '请输入NFS地址', trigger: 'blur'},
        ],
    }
})
let formRef = ref()
const submit = ()=>{
    formRef.value.validate((valid)=>{
        if(valid){
            console.log(data.newVolumeConfig)
            if (useItemer.item.spec.template.spec.volumes == undefined) {
                useItemer.item.spec.template.spec.volumes = []
            }
            for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++){
                if(useItemer.item.spec.template.spec.volumes[i].name == data.newVolumeConfig.name) {
                    // 说明已经存在相同名字的volume
                    ElMessage.error("Volume名称不能重复")
                    return
                }
            }
            const newVolume = JSON.parse(JSON.stringify(data.newVolumeConfig))
            useItemer.item.spec.template.spec.volumes.push(newVolume)
            console.log(useItemer.item.spec.template.spec.volumes)
            // 关闭dialog
            closeDialog()
        } else {
            ElMessage.warning("请完善表单数据")
        }
    })
}
// 订阅关闭dialog的方法
const closeDialog = inject("closeAddVolumeDialog")
const {newVolumeConfig, rules} = toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <el-row :gutter="5">
        <!-- 名称 -->
        <el-col :span="6" v-if="props.method == 'Create'">
            <el-form-item label="Volume名称" prop="name" required>
                <el-input v-model.trim="newVolumeConfig.name" style="width: 180px;" placeholder="请输入Volume名称" />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="NFS地址" prop="nfs.server" required>
                <el-input v-model.trim="newVolumeConfig.nfs.server" style="width: 180px;" placeholder="请输入宿主机路径" />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="NFS路径" prop="nfs.path" required>
                <el-input v-model.trim="newVolumeConfig.nfs.path" style="width: 180px;" placeholder="请输入宿主机路径" />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="只读" prop="nfs.readonly">
                <el-switch v-model="newVolumeConfig.nfs.readonly" />
            </el-form-item>
        </el-col>
    </el-row>
    <!-- 提交按钮 -->
    <div v-if="props.method == 'Create'" style="display: flex;">
        <el-button @click="submit()" type="primary" style="margin: 10px auto;">添加</el-button>
    </div>
  </el-form>
</template>

<style scoped>

</style>
